﻿@inherits Blazorise.Carousel
<CascadingValue Value="@this" IsFixed>
    <CascadingValue Value="@State">
        @ChildContent

        <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
            <div class="slick-slider slick-initialized" dir="ltr">
                <div @ref="@slickListElementRef" id="@slickListElementId" class="@SlidesClassNames">
                    <div class="slick-track" style="@SlickTrackStyle">
                        @if ( carouselSlides.Count > 0 )
                        {
                            <div data-index="-1" class="slick-slide slick-cloned" tabindex="-1" aria-hidden="true" style="@SlickClonedStyle">
                                <div>
                                    <div tabindex="-1" style="width: 100%; display: inline-block;">
                                        @carouselSlides.Last().ChildContent
                                    </div>
                                </div>
                            </div>
                        }
                        @for ( int i = 0; i < carouselSlides.Count; i++ )
                        {
                            int index = i;
                            <div data-index="@index" class="@carouselSlides[index].ClassNames" tabindex="-1" aria-hidden="@((!carouselSlides[index].Active).ToString().ToLowerInvariant())" style="@SlickStyle">
                                <div>
                                    <div tabindex="-1" style="width: 100%; display: inline-block;">
                                        @carouselSlides[index].ChildContent
                                    </div>
                                </div>
                            </div>
                        }
                        @for ( int i = 0; i < carouselSlides.Count; i++ )
                        {
                            int index = i;
                            <div data-index="@(i+carouselSlides.Count)" class="slick-slide slick-cloned" tabindex="-1" aria-hidden="true" style="@SlickClonedStyle">
                                <div>
                                    <div tabindex="-1" style="width: 100%; display: inline-block;">
                                        @carouselSlides[index].ChildContent
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>

                @if ( ShowIndicators )
                {
                    <ul class="@IndicatorsClassNames" style="display: block;">
                        @for ( int i = 0; i < carouselSlides.Count; i++ )
                        {
                            int index = i;
                            <li class="@carouselSlides[index].IndicatorClassNames">
                                <button @onclick="carouselSlides[index].Activate">@(index + 1)</button>
                            </li>
                        }
                    </ul>
                }

                @if ( ShowControls )
                {
                    <button @onclick="@SelectPrevious" type="button" data-role="none" class="slick-prev slick-arrow" aria-label="@PreviousButtonString" role="button" style="display: block;">
                        @PreviousButtonString
                    </button>
                    <button @onclick="@SelectNext" type="button" data-role="none" class="slick-next slick-arrow" aria-label="@NextButtonString" role="button" style="display: block;">
                        @NextButtonString
                    </button>
                }
            </div>
        </div>
    </CascadingValue>
</CascadingValue>